<template>
	<!-- 20230417 -->
	<view class="text-rich-text-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<mp-html :content="html" @imgtap="imgtap" @linktap="linktap" />
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer"></view>
	</view>
</template>

<script>
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	export default {
		components: {
			mpHtml
		},
		props: {
			// 用于渲染的 html 字符串
			html: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			}
		},
		methods: {
			/**
			 * 点击图片
			 * @param {Object} e
			 */
			imgtap(e) {
				// 对做了某种标记的图片进行预览
				if (e['data-flag']) {
					wx.previewImage({
						urls: [e.src] // 仅预览单张图片
					})
				}
			},
			
			/**
			 * 点击链接
			 * @param {Object} e
			 */
			linktap(e) {
				// 下载 doc 文件
				if (e.href.includes('.doc')) {
					uni.downloadFile({
						url: e.href,
						success(res) {
							uni.hideLoading()
							uni.openDocument({
								filePath: res.tempFilePath
							})
						},
						fail(err) {
							uni.hideLoading()
							uni.showModal({
								title: '失败',
								content: err.errMsg,
								showCancel: false
							})
						}
					})
					// 跳转到 webview
				} else if (e.href.includes('xxx.com')) {
					uni.setStorageSync('webview_url', e.href)
					uni.navigateTo({
						url: '/pages/common/webview',
					})
					// 跳转其他小程序
				} else if (e['data-appid']) {
					uni.navigateToMiniProgram({
						appId: e['data-appid']
					})
				}
			}
		}
	}
</script>

<style scoped>

</style>